<template>
  <div class="message-table">
    <el-table :data="tableData" style="width: 100%" height="600px">
      <el-table-column prop="msg" label="留言内容" />
      <el-table-column prop="createAt" label="留言时间" width="400" />
      <el-table-column label="操作" width="140" align="center">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click="handleDeleteClick(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getMessages, removeMessage } from "../../../service/api_message";
import { formatTime } from "../../../utils/formatTime"
// 页面数据
const tableData = ref([]);
const _getMessages = () => {
  getMessages().then((res) => {
    const result = res.data.map(item => {
      item.createAt = formatTime(item.createAt)
      return item
    })
    tableData.value = result;
  });
};
// 网络请求
_getMessages()
// 事件处理
const handleDeleteClick = (id) => {
  removeMessage(id).then((res) => {
    if(res.status === 200) {
      ElMessage.success("删除成功!")
      _getMessages()
    }
  });
};
</script>

<style scoped></style>
